'use client';

import React from 'react';
import { Card, Row, Col, Statistic } from 'antd';
import {
  UserOutlined,
  TeamOutlined,
  BookOutlined,
  RocketOutlined
} from '@ant-design/icons';
import styles from './page.module.css';

export default function AdminDashboard() {
  // 这里后续会从API获取实际数据
  const statistics = {
    totalUsers: 1234,
    activeCreators: 56,
    totalCourses: 78,
    activeActivities: 23
  };

  return (
    <div className={styles.dashboard}>
      <h1 className={styles.title}>管理控制台</h1>
      
      <Row gutter={[24, 24]}>
        <Col xs={24} sm={12} lg={6}>
          <Card bordered={false} className={styles.card}>
            <Statistic
              title="总用户数"
              value={statistics.totalUsers}
              prefix={<UserOutlined />}
              valueStyle={{ color: '#3f8600' }}
            />
          </Card>
        </Col>
        
        <Col xs={24} sm={12} lg={6}>
          <Card bordered={false} className={styles.card}>
            <Statistic
              title="活跃创作者"
              value={statistics.activeCreators}
              prefix={<TeamOutlined />}
              valueStyle={{ color: '#cf1322' }}
            />
          </Card>
        </Col>
        
        <Col xs={24} sm={12} lg={6}>
          <Card bordered={false} className={styles.card}>
            <Statistic
              title="课程总数"
              value={statistics.totalCourses}
              prefix={<BookOutlined />}
              valueStyle={{ color: '#1890ff' }}
            />
          </Card>
        </Col>
        
        <Col xs={24} sm={12} lg={6}>
          <Card bordered={false} className={styles.card}>
            <Statistic
              title="进行中的活动"
              value={statistics.activeActivities}
              prefix={<RocketOutlined />}
              valueStyle={{ color: '#722ed1' }}
            />
          </Card>
        </Col>
      </Row>

      <Row gutter={[24, 24]} className={styles.charts}>
        <Col xs={24} lg={12}>
          <Card title="用户增长趋势" bordered={false}>
            {/* 这里后续会添加用户增长趋势图表 */}
            <div className={styles.chartPlaceholder}>
              用户增长趋势图表
            </div>
          </Card>
        </Col>
        
        <Col xs={24} lg={12}>
          <Card title="内容发布统计" bordered={false}>
            {/* 这里后续会添加内容发布统计图表 */}
            <div className={styles.chartPlaceholder}>
              内容发布统计图表
            </div>
          </Card>
        </Col>
      </Row>

      <Row gutter={[24, 24]}>
        <Col xs={24} lg={12}>
          <Card title="最新活动" bordered={false}>
            {/* 这里后续会添加最新活动列表 */}
            <div className={styles.listPlaceholder}>
              最新活动列表
            </div>
          </Card>
        </Col>
        
        <Col xs={24} lg={12}>
          <Card title="系统通知" bordered={false}>
            {/* 这里后续会添加系统通知列表 */}
            <div className={styles.listPlaceholder}>
              系统通知列表
            </div>
          </Card>
        </Col>
      </Row>
    </div>
  );
} 